import React, { Suspense } from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import TopLoading from "./topLoading";
// import { TransitionGroup, CSSTransition } from "react-transition-group";
const RouterView = props => {
  const { routes = [], token } = props;
  if (routes.length === 0) return null;
  return (
    <Suspense fallback={<TopLoading />}>
      {/* <TransitionGroup>
        <CSSTransition
          classNames={"fade"}
          timeout={500}
          key={Date.now()}
        ></CSSTransition>
      </TransitionGroup> */}
      <Switch>
        {routes.map((route, index) => {
          if (route.redirect) {
            return (
              <Redirect
                exact={true}
                key={route.path}
                from={route.path}
                to={route.redirect}
              />
            );
          }
          const Com = route.component;
          const routes = route.routes || [];
          return (
            <Route
              key={index}
              exact={route.exact || false}
              path={route.path}
              render={props => {
                if (!Com) {
                  return <Redirect to="/404" />;
                }
                return <Com {...props} routes={routes} />;
              }}
            />
          );
        })}
        <Redirect to="/404" />
      </Switch>

      {!token && <Redirect to="/login" />}
    </Suspense>
  );
};
const stateToProps = ({ token }) => {
  return {
    token
  };
};
export default connect(stateToProps)(RouterView);

// Suspense 处理异步组件
